import { useTitle } from 'ahooks'
import React, { useCallback, useState } from 'react'
import style from './index.less'
import { Button, Checkbox, Form, Input, Modal } from 'antd-mobile'
import classnames from 'classnames'
import logo from '@/images/login.png'
import { getAuthCode, login } from '@/services/User'

export default () => {
    useTitle('登陆')

    const [checked, setChecked] = useState<boolean>(false);
    const [visible, setVisible] = useState<boolean>(false);
    const [countdown, setCountdown] = useState(60);
    const [isCounting, setIsCounting] = useState(false);
    const [form] = Form.useForm();
    const onVerifyClickLogin = useCallback(() => { }, [])
    const getCode = async (data: any) => {
        const res = await getAuthCode(data);
        form.resetFields(['authCode'])
        form.setFieldValue('authCode', res)

    }
    const onFinish = async (data: any) => {
        const res = await login(data)
        localStorage.token = res
        console.log(res);
    }

    const handleGetCode = async() => {
        if (isCounting) {
            return;
        }

        setIsCounting(true);
        const res = await getAuthCode(form.getFieldValue('phone'))
        console.log(res);
        

        const timer = setInterval(() => {
            setCountdown(prev => prev - 1);
        }, 1000);
        setTimeout(() => {
            clearInterval(timer);
            setIsCounting(false);
            setCountdown(60);
        }, 3000);
    };


    return (
        <div className={style.page}>
            <div className={style.title}>
                <img src={logo} alt="logo" className={style.img} />
                <span>欢迎登录!</span>
            </div>
            <div className={style.form}>
                <Form
                    form={form}
                    layout='horizontal'
                    onFinish={onFinish}
                    requiredMarkStyle='none'
                >
                    <Form.Item
                        label='+86'
                        name='phone'
                        
                        rules={[
                            { required: true, message: '手机号码不能为空' },
                            { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确' }
                        ]}
                    >
                        <Input placeholder='请输入手机号' clearable />
                    </Form.Item>
                    <Form.Item
                        label='验证码'
                        name='authCode'
                        rules={[{ required: true, message: '验证码不能为空' }]}
                        extra={
                            <Button
                                className={style.extraPart}
                                // onClick={() => { getCode(form.getFieldValue('phone')) }}
                                disabled={isCounting} onClick={handleGetCode}
                            >
                                {isCounting ? `${countdown}s后重试` : '发送验证码'}
                            </Button>

                        }>
                        <Input placeholder='请输入验证码' clearable />
                    </Form.Item>
                </Form>
            </div>
            <Checkbox
                className={style.checkbox}
                onChange={() => { setChecked(!checked) }}
            >
                我已阅读并同意
                <span
                    className={style.ation}
                //   onClick={async (e) => {
                //     e.preventDefault();
                //     await setProtocolKey(0);
                //     setVisible(true);
                //   }}
                >
                    《农品慧用户协议》
                </span>
                内相关条款
            </Checkbox>
            <Button
                color="success"
                block
                size='large'
                onClick={()=>form.submit()}
                disabled={!checked}
            >
                去登录
            </Button>
            {/* <Modal
        popup
        visible={visible}
        onClose={() => setVisible(false)}
        // animationType="slide-up"
      /> */}
            {/* <Protocol protocolKey={protocolKey} />
        <div className={style.ation2} onClick={() => setVisible(false)}>
          关闭
        </div> */}
        </div>
    )
}
